import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/date_mode.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/pduration.dart';
import 'package:share_fit/app/controllers/device/remind/picker/pickers.dart';
import 'package:share_fit/app/controllers/device/remind/picker/style/picker_style.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';
import 'package:sprintf/sprintf.dart';

import 'sedentary_remind_logic.dart';

class SedentaryRemindPage extends StatelessWidget {
  SedentaryRemindPage({super.key});

  final logic = Get.put(SedentaryRemindLogic());
  final state = Get.find<SedentaryRemindLogic>().state;

  @override
  Widget build(BuildContext context) {
    state.switchRemind = logic.read('sedentary_remind_switch', defaultValue: false);
    state.switchDisturb = logic.read('sedentary_remind_disturb', defaultValue: false);
    state.startTime = logic.read('sedentary_remind_start', defaultValue: state.startTime);
    state.endTime = logic.read('sedentary_remind_end', defaultValue: state.endTime);
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.settings_sedentary_remind.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
        // leading: IconButton(
        //   padding: EdgeInsets.only(left: 40.w,),
        //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
        //   onPressed: () { Get.back(); },
        //   // child: Image.asset("images/icon_appbar_arrow_back.png"),
        // ),
        // leadingWidth: 25,
      ),
      body: Container(
        child: Column(
          children: [
            Container(height: 99.h,),
            Image(
              width: 302.w,
              height: 328.h,
              image: const AssetImage("assets/images/device/icon_sedentary_remind.png"),),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 137.h, 42.w, 0),
              child: Text(LocaleKeys.sedentary_remind_des.ts, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 104.h, 42.w, 0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white
              ),
              child: Column(
                  children: [
                    _buildItemSwitch(sprintf(LocaleKeys.sedentary_remind_minute.ts, ['60']), LocaleKeys.sedentary_remind_switch_des.ts, 'sedentary_remind',
                        onChange: (value){
                          logic.switchRemind(value);
                          logic.save('sedentary_remind_switch', value);
                        }),
                    const Divider(height: 1,),
                    _buildItem(LocaleKeys.settings_start_time.ts, 'sedentary_start_time',
                        onTap: (){
                          _pickerClick(context, LocaleKeys.settings_start_time.ts, DateMode.HM, PDuration(hour: state.startTimeHour, minute: state.startTimeMin));
                        }),
                    const Divider(height: 1,),
                    _buildItem(LocaleKeys.settings_end_time.ts, 'sedentary_end_time',
                        onTap: (){
                          _pickerClick(context, LocaleKeys.settings_end_time.ts, DateMode.HM, PDuration(hour: state.endTimeHour, minute: state.endTimeMin));
                        }),
                    // const Divider(height: 1,),
                    // _buildItemSwitch(LocaleKeys.sedentary_remind_disturb.ts, LocaleKeys.sedentary_remind_disturb_des.ts, 'sedentary_disturb',
                    //     onChange: (value){
                    //       logic.switchDisturb(value);
                    //       logic.save('sedentary_remind_disturb', value);
                    //     }),
                  ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildItemSwitch(String title, String subTitle, String id, {onChange}) {
   return Container(
     height: 246.h,
     padding: EdgeInsets.only(left: 62.w, right: 36.w),
     child: Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
         Container(
           height: 246.h,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(title, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
               Text(subTitle, style: TextStyle(fontSize: 38.sp, color: Color(0xFF898C8F)),),
             ],),),
         GetBuilder<SedentaryRemindLogic>(
             id: id,
             builder: (_){
              return Transform.scale(
                scale: 0.7,
                child: CupertinoSwitch(value: id=='sedentary_remind'?state.switchRemind:state.switchDisturb,
                    activeColor: ColorConst.activeColor,
                    onChanged: onChange),
              );
         })
       ],),);
  }

  Widget _buildItem(String subTitle, String id, {onTap}) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: Container(
        height: 246.h,
        padding: EdgeInsets.only(left: 62.w, right: 36.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 246.h,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GetBuilder<SedentaryRemindLogic>(
                      id: id,
                      builder: (_){
                        return Text(subTitle==LocaleKeys.settings_start_time.ts?state.startTime:state.endTime, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),);
                      }),
                  // Text(title, style: TextStyle(fontSize: 42.sp, color: Color(0xFF2B2B2B)),),
                  Text(subTitle, style: TextStyle(fontSize: 38.sp, color: Color(0xFF898C8F)),),
                ],),),
            const Icon(
              Icons.arrow_forward_ios,
              size: 16,
            ),
          ],),),
    );
  }

  void _pickerClick(BuildContext context, String title, DateMode dateMode, PDuration initDate) {
    var pickerStyle = PickerStyle(
      cancelButton: _bottomButton(LocaleKeys.person_choice_cancel.ts),
      commitButton: _bottomButton(LocaleKeys.person_choice_submit.ts),
      headDecoration: _headDecoration(),
      title: _titleView(title),
      textColor: ColorConst.btnFontColor,
    );

    Pickers.showDatePicker(
      context,
      mode: dateMode,
      selectDate: initDate,
      pickerStyle: pickerStyle,
      onConfirm: (p) {
        print('longer >>> 返回开始日期数据：$p');
        String str = '';
        if(p.hour!<=12) {
          str = LocaleKeys.settings_start_time_morning.ts;
        } else {
          str = LocaleKeys.settings_end_time_afternoon.ts;
        }
        if(title==LocaleKeys.settings_start_time.ts) {
          logic.setStartTime(p.hour, p.minute);
        } else {
          logic.setEndTime(p.hour, p.minute);
        }
        Navigator.pop(context);
      },
    );
  }

  Widget _titleView(String text) {
    return Center(child: Text(text, style: TextStyle(color: ColorConst.btnFontColor, fontSize: 54.sp),));
  }

  Widget _bottomButton(String text) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 12, right: 22),
      child: Text(text,
          style: TextStyle(color: Color(0xFF2B2B2B), fontSize: 42.sp)),
    );
  }

  Decoration _headDecoration() {
    return BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10), topRight: Radius.circular(10)));
  }
}
